<template>
	<view class="home-container">
		<scroll-view class="content-scroll" scroll-y>
			<!-- 蓝色头部区域 -->
			<view class="blue-header">
				<view class="header-top">
					<text class="page-title">主页</text>
					<view class="header-right">
						<view class="header-right-container">
							<view class="header-icon">
								<text>⋯</text>
							</view>
							<view class="header-icon active">
								<view class="target-icon"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="shop-info">
					<image class="shop-avatar" src="/static/shouye/图层 3@3x.png" mode="aspectFill"></image>
					<text class="shop-name">大美汽修厂, 欢迎您</text>
				</view>
			</view>
			
			<!-- 快速操作按钮 -->
			<view class="quick-actions">
				<view class="action-btn" @click="handleScan">
					<image class="action-icon" src="/static/shouye/扫码@3x.png" mode="aspectFit"></image>
					<text class="action-text">扫码核销</text>
				</view>
				<view class="action-btn" @click="handleInputCode">
					<image class="action-icon" src="/static/shouye/输入2@3x.png" mode="aspectFit"></image>
					<text class="action-text">输入核销码</text>
				</view>
			</view>
			
			<!-- 功能网格 -->
			<view class="feature-grid">
				<view class="feature-item" @click="handleFeature('statistics')">
					<view class="feature-icon-wrapper blue">
						<image class="feature-icon" src="/static/shouye/统计@3x.png" mode="aspectFit"></image>
					</view>
					<text class="feature-label">经营统计</text>
				</view>
				
				<view class="feature-item" @click="handleFeature('verification')">
					<view class="feature-icon-wrapper orange">
						<image class="feature-icon" src="/static/shouye/核销记录 (1)@3x.png" mode="aspectFit"></image>
					</view>
					<text class="feature-label">核销记录</text>
				</view>
				
				<view class="feature-item" @click="handleFeature('income')">
					<view class="feature-icon-wrapper blue">
						<image class="feature-icon" src="/static/shouye/123收支明细@3x.png" mode="aspectFit"></image>
					</view>
					<text class="feature-label">收支明细</text>
				</view>
				
				<view class="feature-item" @click="handleFeature('orders')">
					<view class="feature-icon-wrapper orange">
						<image class="feature-icon" src="/static/shouye/订单管理@3x.png" mode="aspectFit"></image>
						<view class="badge">12</view>
					</view>
					<text class="feature-label">订单管理</text>
				</view>
				
				<view class="feature-item" @click="handleFeature('coupons')">
					<view class="feature-icon-wrapper blue">
						<image class="feature-icon" src="/static/shouye/卡券@3x.png" mode="aspectFit"></image>
					</view>
					<text class="feature-label">卡券管理</text>
				</view>
				
				<view class="feature-item" @click="handleFeature('maintenance')">
					<view class="feature-icon-wrapper green">
						<image class="feature-icon" src="/static/shouye/维修@3x.png" mode="aspectFit"></image>
						<view class="badge">12</view>
					</view>
					<text class="feature-label">维修任务</text>
				</view>
				
				<view class="feature-item" @click="handleFeature('reviews')">
					<view class="feature-icon-wrapper red">
						<image class="feature-icon" src="/static/shouye/评价管理@3x.png" mode="aspectFit"></image>
					</view>
					<text class="feature-label">评价管理</text>
				</view>
				
				<view class="feature-item" @click="handleFeature('profile')">
					<view class="feature-icon-wrapper blue">
						<image class="feature-icon" src="/static/shouye/资料库@3x.png" mode="aspectFit"></image>
					</view>
					<text class="feature-label">商户资料</text>
				</view>
				
				<view class="feature-item" @click="handleFeature('activity')">
					<view class="feature-icon-wrapper orange">
						<image class="feature-icon" src="/static/shouye/活动@3x.png" mode="aspectFit"></image>
					</view>
					<text class="feature-label">活动发布</text>
				</view>
			</view>
			
			<!-- 最新通知区域 -->
			<view class="notifications-section">
				<view class="notifications-header">
					<view class="notifications-title-wrapper">
						<image class="notifications-icon" src="/static/shouye/消息-信息@3x.png" mode="aspectFit"></image>
						<text class="notifications-title">最新通知</text>
					</view>
					<view class="notifications-link" @click="handleTaskList">
						<text>今日需上门取车任务共32单</text>
						<view class="arrow-icon"></view>
					</view>
				</view>
				
				<view class="notifications-table">
					<view class="table-header">
						<text class="table-cell">用户</text>
						<text class="table-cell">服务项目</text>
						<text class="table-cell">时间</text>
					</view>
					<view class="table-row" v-for="(item, index) in notifications" :key="index" @click="handleNotificationClick(item)">
						<text class="table-cell">{{ item.user }}</text>
						<text class="table-cell">{{ item.service }}</text>
						<text class="table-cell">{{ item.time }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				notifications: [
					{
						user: '张先生',
						service: '汽车美容、基础保养',
						time: '2022-03-10 11:09'
					},
					{
						user: '张先生',
						service: '汽车精细',
						time: '2022-03-10 11:09'
					},
					{
						user: '张先生',
						service: '车辆维修-上门取车',
						time: '2022-03-10 11:09'
					},
					{
						user: '张先生',
						service: '汽车美容、基础保养',
						time: '2022-03-10 11:09'
					},
					{
						user: '张先生',
						service: '车辆维修-到店维修',
						time: '2022-03-10 11:09'
					}
				]
			}
		},
		methods: {
			handleScan() {
				// TODO: 扫码核销
				uni.navigateTo({
				            url: '/pages/scan/scan' 
				        })
			},
			handleInputCode() {
				// TODO: 输入核销码
				 uni.navigateTo({
				            url: '/pages/verify/verify' 
				        })
			},
			handleFeature(type) {
				const routeMap = {
					statistics: '/pages/tongji/tongji',
					verification: '/pages/hexiao/hexiao',
					income: '/pages/shouzhi/shouzhi',
					orders: '/pages/dingdan/dingdan',
					coupons: '/pages/coupon/coupon',
					maintenance: '/pages/fixTask/fixTask',
					reviews: '/pages/evaluation/evaluation',
					profile: '/pages/merchantInfo/merchantInfo',
					activity: '/pages/ActPublish/ActPublish'
				}
				
				const route = routeMap[type]
				if (route) {
					uni.navigateTo({
						url: route
					})
				} else {
					uni.showToast({
						title: '功能开发中',
						icon: 'none'
					})
				}
			},
			handleTaskList() {
				// TODO: 跳转到任务列表
				uni.showToast({
					title: '查看任务列表',
					icon: 'none'
				})
			},
			handleNotificationClick(item) {
				// TODO: 处理通知点击
				uni.showToast({
					title: '查看详情',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home-container {
		width: 100%;
		height: 100vh;
		background: #f5f5f5;
		display: flex;
		flex-direction: column;
	}
	
	.content-scroll {
		flex: 1;
		height: 100vh;
		overflow-y: auto;
		background: #f5f5f5;
	}
	
	.blue-header {
		background: #007aff;
		padding-top: var(--status-bar-height, 44px);
		padding-bottom: 40rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}
	
	.header-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}
	
	.page-title {
		font-size: 36rpx;
		font-weight: 500;
		color: #fff;
	}
	
	.header-right {
		display: flex;
		align-items: center;
	}
	
	.header-right-container {
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 40rpx;
		padding: 8rpx 12rpx;
		gap: 8rpx;
	}
	
	.header-icon {
		width: 48rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: transparent;
		
		text {
			color: #fff;
			font-size: 32rpx;
			line-height: 1;
		}
		
		&.active {
			background: rgba(255, 255, 255, 0.3);
		}
	}
	
	.target-icon {
		width: 24rpx;
		height: 24rpx;
		border: 2rpx solid #fff;
		border-radius: 50%;
		position: relative;
		
		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 8rpx;
			height: 8rpx;
			background: #fff;
			border-radius: 50%;
		}
	}
	
	.shop-info {
		display: flex;
		align-items: center;
	}
	
	.shop-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right: 24rpx;
		background: #fff;
	}
	
	.shop-name {
		font-size: 36rpx;
		font-weight: 500;
		color: #fff;
	}
	
	.quick-actions {
		display: flex;
		gap: 20rpx;
		padding: 30rpx;
		background: #fff;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.action-btn {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 200rpx;
		background: #f8f8f8;
		border-radius: 16rpx;
		border: 1rpx solid #e0e0e0;
	}
	
	.action-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 16rpx;
	}
	
	.action-text {
		font-size: 28rpx;
		color: #333;
	}
	
	.feature-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 30rpx;
		padding: 30rpx;
		background: #fff;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.feature-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.feature-icon-wrapper {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		margin-bottom: 16rpx;
		
		&.blue {
			background: #007aff;
		}
		
		&.orange {
			background: #ff9500;
		}
		
		&.green {
			background: #34c759;
		}
		
		&.red {
			background: #ff3b30;
		}
	}
	
	.feature-icon {
		width: 50rpx;
		height: 50rpx;
	}
	
	.badge {
		position: absolute;
		top: -8rpx;
		right: -8rpx;
		width: 36rpx;
		height: 36rpx;
		background: #ff3b30;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		color: #fff;
		border: 2rpx solid #fff;
	}
	
	.feature-label {
		font-size: 24rpx;
		color: #333;
		text-align: center;
	}
	
	.notifications-section {
		background: #fff;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 20rpx;
		margin-bottom: 40rpx;
		padding: 30rpx;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.notifications-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}
	
	.notifications-title-wrapper {
		display: flex;
		align-items: center;
	}
	
	.notifications-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 12rpx;
	}
	
	.notifications-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}
	
	.notifications-link {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #ff9500;
		cursor: pointer;
		
		.arrow-icon {
			width: 12rpx;
			height: 12rpx;
			margin-left: 8rpx;
			border-top: 1rpx solid #999;
			border-right: 1rpx solid #999;
			border-bottom: 1rpx solid transparent;
			border-left: 1rpx solid transparent;
			transform: rotate(45deg);
		}
	}
	
	.notifications-table {
		width: 100%;
	}
	
	.table-header {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #e0e0e0;
		margin-bottom: 10rpx;
	}
	
	.table-row {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		
		&:last-child {
			border-bottom: none;
		}
	}
	
	.table-cell {
		font-size: 26rpx;
		color: #666;
		text-align: left;
		
		&:nth-child(1) {
			width: 120rpx;
			flex-shrink: 0;
		}
		
		&:nth-child(2) {
			flex: 1;
			margin: 0 20rpx;
		}
		
		&:nth-child(3) {
			width: 200rpx;
			flex-shrink: 0;
			text-align: right;
		}
	}
	
	.table-header .table-cell {
		font-weight: 500;
		color: #333;
	}
</style>
